<template>
  <h1>Statistics plot</h1>
  <div class="barChartBox">
    <div class="title">Number of genomes, genes and primer pairs</div>
    <div class="barChartItemBox">
      <EchartsCom title="Number of genomes" :propsData="echartsData2" />
      <EchartsCom title="Number of genomes" :propsData="echartsData3" />
      <EchartsCom title="Number of primer pairs" :propsData="echartsData1" />
    </div>
  </div>
  <div class="barChartBox-t">
    <div class="title">The number of taxonomies</div>
    <div class="barChartItemBox">
      <EchartsCom title="Number of genomes" :propsData="echartsData4" />
    </div>
  </div>
  <h1>Statistics table</h1>
  <div class="tableBox">
    <div class="tableItemBox">
      <el-table :data="tableData1" border style="width: 100%; color: #000">
        <el-table-column prop="title" label="" width="77" />
        <el-table-column
          prop="numberofprimerpairs"
          label="Number of primer pairs"
          width="180"
        />
        <el-table-column
          prop="numberofgenomes"
          label="Number of genomes"
          width="165"
        />
        <el-table-column prop="numberofgenes" label="Number of genes" />
      </el-table>
    </div>
    <div class="tableItemBox">
      <el-table :data="tableData2" border style="width: 100%; color: #000">
        <el-table-column prop="title" label="" width="77" />
        <el-table-column prop="Kingdom" label="#Kingdom" width="94" />
        <el-table-column prop="Phylum" label="#Phylum" width="85" />
        <el-table-column prop="Class" label="#Class" width="72" />
        <el-table-column prop="Order" label="#Order" width="72" />
        <el-table-column prop="Family" label="#Family" width="78" />
        <el-table-column prop="Genus" label="#Genus" width="77" />
        <el-table-column prop="Species" label="#Species" width="86" />
        <el-table-column prop="Organism" label="#Organism" />
      </el-table>
    </div>
  </div>
</template>

<script setup>
import EchartsCom from "@/components/EchartsCom.vue";
const tableData1 = [
  {
    title: "Bacteria",
    numberofprimerpairs: "33044877",
    numberofgenomes: "36461",
    numberofgenes: "10176682",
  },
  {
    title: "Viruses",
    numberofprimerpairs: "633985",
    numberofgenomes: "10430",
    numberofgenes: "132325",
  },
  {
    title: "Fungi",
    numberofprimerpairs: "15949",
    numberofgenomes: "342",
    numberofgenes: "487",
  },
];
const tableData2 = [
  {
    title: "Bacteria",
    Kingdom: "4",
    Phylum: "53",
    Class: "115",
    Order: "278",
    Family: "704",
    Genus: "3275",
    Species: "2116",
    Organism: "24132",
  },
  {
    title: "Viruses",
    Kingdom: "10",
    Phylum: "17",
    Class: "38",
    Order: "64",
    Family: "220",
    Genus: "2536",
    Species: "6397",
    Organism: "10228",
  },
  {
    title: "Fungi",
    Kingdom: "0",
    Phylum: "3",
    Class: "25",
    Order: "57",
    Family: "109",
    Genus: "186",
    Species: "153",
    Organism: "342",
  },
];
// 饼状图数据
const echartsData1 = {
  title: {
    left: "center",
    textStyle: {
      color: "#000",
      fontSize: 16,
      fontFamily: "Helvetica Neue",
    },
  },
  grid: {
    left: "10%",
    bottom: "10%",
    top: "10%",
    containLabel: true,
  },

  tooltip: {
    trigger: "item",
    textStyle: {
      color: "#000",
      fontFamily: "Helvetica Neue",
    },
    formatter: function (value) {
      console.log("value", value);
      if (value.dataIndex == 0) {
        return "Bacteria 33044877";
      } else if (value.dataIndex == 1) {
        return "Viruses 633985";
      } else if (value.dataIndex == 2) {
        return "Fungi 15949";
      }
    },
  },
  xAxis: {
    type: "category",
    data: ["Bacteria", "Viruses", "Fungi"],
    axisLabel: {
      textStyle: {
        color: "#000", //坐标值得具体的颜色,
        fontFamily: "Helvetica Neue",
      },
    },
  },
  yAxis: {
    type: "value",
    name: `log2(#Primer pairs)`,
    nameLocation: "center",
    axisLabel: {
      textStyle: {
        color: "#000",
        fontFamily: "Helvetica Neue",
      },
    },
    nameTextStyle: {
      padding: [0, -20, 20, 0],
      fontFamily: "Helvetica Neue",
      fontWeight: 600,
      fontSize: "18",
      color: "#000",
      fontFamily: "Helvetica Neue",
    },
  },
  series: [
    {
      data: [
        { value: 24.97792, itemStyle: { color: "#526E53" } },
        { value: 19.27409, itemStyle: { color: "#C7B9C2" } },
        { value: 13.96118, itemStyle: { color: "#659B9A" } },
      ],
      type: "bar",
      color: "#5470c6",
      label: {
        show: true,
        position: "top",
        formatter: function (data) {
          switch (data.value) {
            case 24.97792:
              return "33044877";
              break;
            case 19.27409:
              return "633985";
              break;
            case 13.96118:
              return "15949";
              break;
            default:
              break;
          }
        },
      },
    },
  ],
};
//  饼状图数据2
const echartsData2 = {
  title: {
    left: "center",
    textStyle: {
      color: "#000",
      fontSize: 16,
      fontFamily: "Helvetica Neue",
    },
  },
  grid: {
    left: "10%",
    bottom: "10%",
    top: "10%",
    containLabel: true,
  },
  tooltip: {
    textStyle: {
      color: "#000",
      fontFamily: "Helvetica Neue",
    },
    trigger: "item",
    formatter: function (value) {
      console.log("value", value);
      if (value.dataIndex == 0) {
        return "Bacteria 36461";
      } else if (value.dataIndex == 1) {
        return "Viruses 10430";
      } else if (value.dataIndex == 2) {
        return "Fungi 342";
      }
    },
  },
  xAxis: {
    type: "category",
    data: ["Bacteria", "Viruses", "Fungi"],
    axisLabel: {
      textStyle: {
        color: "#000",
        fontFamily: "Helvetica Neue",
      },
    },
  },
  yAxis: {
    type: "value",
    name: `log2(#Genomes)`,
    nameLocation: "center",
    axisLabel: {
      textStyle: {
        color: "#000",
        fontFamily: "Helvetica Neue",
      },
    },
    nameTextStyle: {
      padding: [0, -20, 20, 0],
      fontFamily: "Helvetica Neue",
      fontWeight: 600,
      fontSize: "18",
      color: "#000", //颜色,
    },
  },
  series: [
    {
      data: [
        { value: 15.154067, itemStyle: { color: "#526E53" } },
        { value: 13.348452, itemStyle: { color: "#C7B9C2" } },
        { value: 8.417853, itemStyle: { color: "#659B9A" } },
      ],

      type: "bar",
      color: "#5470c6",
      label: {
        show: true,
        position: "top",
        formatter: function (data) {
          switch (data.value) {
            case 15.154067:
              return "36461";
              break;
            case 13.348452:
              return "10430";
              break;
            case 8.417853:
              return "342";
              break;
            default:
              break;
          }
        },
      },
    },
  ],
};
//  饼状图数据3
const echartsData3 = {
  title: {
    left: "center",
    textStyle: {
      color: "#000",
      fontSize: 16,
      fontFamily: "Helvetica Neue",
    },
  },
  grid: {
    left: "10%",
    bottom: "10%",
    top: "10%",
    containLabel: true,
  },
  tooltip: {
    trigger: "item",
    textStyle: {
      color: "#000",
      fontFamily: "Helvetica Neue",
    },
    formatter: function (value) {
      console.log("value", value);
      if (value.dataIndex == 0) {
        return "Bacteria 10176682";
      } else if (value.dataIndex == 1) {
        return "Viruses 132325";
      } else if (value.dataIndex == 2) {
        return "Fungi 487";
      }
    },
  },
  xAxis: {
    type: "category",
    data: ["Bacteria", "Viruses", "Fungi"],
    axisLabel: {
      textStyle: {
        color: "#000",
        fontFamily: "Helvetica Neue",
      },
      fontFamily: "Helvetica Neue",
    },
  },
  yAxis: {
    type: "value",
    name: `log2(#Genes)`,
    nameLocation: "center",
    axisLabel: {
      textStyle: {
        color: "#000",
        fontFamily: "Helvetica Neue",
      },
    },
    nameTextStyle: {
      padding: [0, -20, 20, 0],
      fontFamily: "Helvetica Neue",
      fontWeight: 600,
      fontSize: "18",
      color: "#000",
    },
  },
  series: [
    {
      data:
      [
        { value: 23.278764, itemStyle: { color: "#526E53" } },
        { value: 17.013726, itemStyle: { color: "#C7B9C2" } },
        { value: 8.927778, itemStyle: { color: "#659B9A" } },
    ],
      type: "bar",
      color: "#5470c6",
      label: {
        show: true,
        position: "top",
        formatter: function (data) {
          switch (data.value) {
            case 23.278764:
              return "10176682";
              break;
            case 17.013726:
              return "132325";
              break;
            case 8.927778:
              return "487";
              break;
            default:
              break;
          }
        },
      },
    },
  ],
};
//  饼状图数据4
const echartsData4 = {
  title: {
    left: "center",
  },
  grid: {
    left: "4%",
    right: "0%",
    top: "10%",
    bottom: "5%",
    containLabel: true,
  },
  tooltip: {
    trigger: "item",
    textStyle: {
      color: "#000",
      fontFamily: "Helvetica Neue",
    },
    formatter: function (value) {
      console.log("value", value);
      const obj = {
        Kingdom: {
          2: 4,
          3.321928: 10,
          0: 0,
        },
        Phylum: {
          5.72792: 53,
          4.087463: 3,
          1.584963: 17,
        },
        Class: {
          6.84549: 115,
          5.247928: 25,
          4.643856: 38,
        },
        Order: {
          4.643856: 278,
          6: 57,
          5.83289: 64,
        },
        Family: {
          9.459432: 704,
          7.78136: 109,
          6.768184: 220,
        },
        Genus: {
          11.677279: 3276,
          11.308339: 186,
          7.539159: 2537,
        },
        Species: {
          11.047124: 2116,
          12.64318: 153,
          7.257388: 6397,
        },
        Organism: {
          14.55866: 24132,
          13.320236: 342,
          8.417853: 10228,
        },
      };
      for (const key in obj) {
        if (value.name == key) {
          return `
          <div style="padding:0px 15px">
            <div>${value.seriesName}</div>
            <div style="display:flex;align-items: center;">
              <div style="height:10px;width:10px;background:${
                value.color
              };border-radius:90%;margin-right:10px"></div>
              <div>${value.name}  ${String(obj[key][value.value])}</div>
            </div>
          </div>
            `;
        }
      }
    },
  },
  // legend: {
  //   left: "0%",
  //   right: "0%",
  //   data: ["Bacteria", "Fungi", "Viruses"],
  //   orient: "vertical",
  //   textStyle: {
  //     color: "#000",
  //     fontFamily: "Helvetica Neue",
  //   },
  // },
  xAxis: {
    type: "category",
    data: [
      "Kingdom",
      "Phylum",
      "Class",
      "Order",
      "Family",
      "Genus",
      "Species",
      "Organism",
    ],
    axisLabel: {
      textStyle: {
        color: "#000",
        fontFamily: "Helvetica Neue",
      },
      fontFamily: "Helvetica Neue",
    },
  },
  yAxis: {
    type: "value",
    name: `log2(#Counts)`,
    nameLocation: "center",
    nameGap: 40,
    axisLabel: {
      textStyle: {
        color: "#000",
        fontFamily: "Helvetica Neue",
      },
    },
    nameTextStyle: {
      padding: [0, -20, 20, 0],
      fontFamily: "Helvetica Neue",
      fontWeight: 600,
      fontSize: "18",
      color: "#000",
    },
  },
  series: [
    {
      name: "Bacteria",
      type: "bar",
      color: "#f7756c",
      // data: [4, 53, 115, 278, 704, 3276, 2116, 24132],
      data: [
        2, 5.72792, 6.84549, 4.643856, 9.459432, 11.677279, 11.047124, 14.55866,
      ],
      label: {
        show: true,
        position: "top",
        formatter: function (data) {
          return [4, 53, 115, 278, 704, 3276, 2116, 24132][data.dataIndex];
        },
      },
    },
    {
      name: "Viruses",
      type: "bar",
      color: "#619cff",
      // data: [10, 3, 25, 57, 109, 186, 153, 342],
      data: [
        3.321928, 4.087463, 5.247928, 6, 7.78136, 11.308339, 12.64318,
        13.320236,
      ],
      label: {
        show: true,
        position: "top",
        formatter: function (data) {
          return [10, 3, 25, 57, 109, 186, 153, 342][data.dataIndex];
        },
      },
    },
    {
      name: "Fungi",
      type: "bar",
      color: "#00ba38",
      // data: [0, 17, 38, 64, 220, 2537, 6397, 10228],
      data: [
        0, 1.584963, 4.643856, 5.83289, 6.768184, 7.539159, 7.257388, 8.417853,
      ],
      label: {
        show: true,
        position: "top",
        formatter: function (data) {
          return [0, 17, 38, 64, 220, 2537, 6397, 10228][data.dataIndex];
        },
      },
    },
  ],
};
</script>
<style lang="scss" scoped>
h1 {
  font-size: 34px;
  text-align: left;
}

.barChartBox {
  .title {
    font-size: 28px;
  }

  .barChartItemBox {
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
  }
}

.barChartBox-t {
  .title {
    font-size: 28px;
  }
}

.tableBox {
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;

  .tableItemBox:nth-child(1) {
    width: 42%;
  }

  .tableItemBox:nth-child(2) {
    width: 56%;
  }
}

::v-deep .el-table__header th {
  color: #000 !important;
}
</style>
